<template>
  <view class="">
    <TitleArea
      :modelValue="modelValue.title"
      @update:modelValue="changeValue('title', $event)"
    />
    <up-gap height="20rpx"></up-gap>
    <DescArea
      :modelValue="modelValue.content"
      @update:modelValue="changeValue('content', $event)"
    />
    <up-gap v-if="isType0" height="20rpx"></up-gap>
    <PriceArea
      v-if="isType0"
      :modelValue="modelValue.price"
      @update:modelValue="changeValue('price', $event)"
    />
    <up-gap v-if="isType0" height="40rpx"></up-gap>
    <ExpressMailArea
      v-if="isType0"
      :deliveryMethod="modelValue.deliveryMethod"
      :isDeliveryCovered="modelValue.isDeliveryCovered"
      @update:deliveryMethod="changeValue('deliveryMethod', $event)"
      @update:isDeliveryCovered="changeValue('isDeliveryCovered', $event)"
    />
    <up-gap height="30rpx"></up-gap>
    <PositionArea
      v-if="!isExchangeType"
      :modelValue="modelValue"
      @update:modelValue="changeValue('modelValue', $event)"
    />
    <IsHelp
      v-if="isExchangeType"
      :modelValue="modelValue.isNeedHelp"
      @update:modelValue="changeValue('isNeedHelp', $event)"
    />
  </view>
</template>

<script setup>
import { computed, ref, toRef } from "vue";
import TitleArea from "@/components/PublishInput/titleArea.vue";
import DescArea from "@/components/PublishInput//descArea.vue";
import PriceArea from "@/components/PublishInput/priceArea.vue";
import PositionArea from "@/components/PublishInput/positionArea.vue";
import ExpressMailArea from "@/components/PublishRadio/expressMailArea.vue";
import IsHelp from "@/components/PublishInput/IsHelp.vue";

import usePublishType from "../PublishTabs/config.js";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["update:modelValue"]);

const modelValue = toRef(props, "modelValue");

const { isType0, isExchangeType } = usePublishType(modelValue);

const changeValue = (key, value) => {
  if (key === "modelValue") {
    emit("update:modelValue", {
      ...props.modelValue,
      ...value,
    });
  } else {
    [key].value = value;
    emit("update:modelValue", {
      ...props.modelValue,
      [key]: value,
    });
  }
};
</script>

<style></style>
